<template>
  <!--物料退库状态-->
  <div class="material_return_status">
    <span class="block_label_color mad_label"
          :class="stateColor">{{data.returnStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'MaterialReturnStatus',
  props: {
    data: Object
  },
  computed: {
    stateColor() {
      switch (this.data.returnStatusValue) {
        case 'ToBeReturn':
          return 'material_return_status_wait'
        case 'Returned':
          return 'material_return_status_finished'
        case 'Cancel':
          return 'material_return_status_cancel'
        case 'Fail':
          return 'material_return_status_fail'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  // 待退库
  @MaterialReturnStatusWait: #00b4ff;
  // 已退库
  @MaterialReturnStatusFinished: #00a949;
  // 已撤销
  @MaterialReturnStatusCancel: #7e8e9f;
  // 失败
  @MaterialReturnStatusFail: #f8000f;
  .material_return_status{
    .block_label_color{
      // 待退库
      &.material_return_status_wait{
        background-color: @MaterialReturnStatusWait;
      }
      // 已退库
      &.material_return_status_finished{
        background-color: @MaterialReturnStatusFinished;
      }
      // 已撤销
      &.material_return_status_cancel{
        background-color: @MaterialReturnStatusCancel;
      }
      // 失败
      &.material_return_status_fail{
        background-color: @MaterialReturnStatusFail;
      }
    }
  }
</style>
